<template>
    <div style="padding:20px 20px;">

        <el-form ref="searchKey"
             :inline="true"
             :model="searchKey"
             :show-message="false"
             :inline-message="true"
             >

             <el-form-item label="项目编号" prop="projectNo" label-width="80px">
                <el-input size="small" v-model="searchKey.projectNo" placeholder="请输入项目编号"></el-input>
            </el-form-item>

            <el-form-item label="项目名称" prop="projectName" >
                <el-input size="small" v-model="searchKey.projectName" placeholder="请输入项目名称"></el-input>
            </el-form-item>

            

            <!-- <el-form-item label="合同编号" prop="contractNo" label-width="80px">
                <el-input size="small" v-model="searchKey.contractNo" placeholder="请输入合同编号"></el-input>
            </el-form-item> -->

            <el-form-item label="开票申请部门" prop="deptId" >
            <tree-select v-model="searchKey.deptId" :options="departmentAllListData" 
                        placeholder="选择部门"
                        style="width: 200px" />
            </el-form-item>

            <el-form-item label="费用所属月" prop="expenseMonth">
                <el-date-picker clearable size="small" style="width: 160px"
                    v-model="searchKey.expenseMonth"
                    type="month"
                    value-format="yyyy-MM"
                    placeholder="请选择费用所属月">
                </el-date-picker>
            </el-form-item>

                <el-form-item label="创建时间">
                    <el-date-picker
                    v-model="searchKey.createTime"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
    
        <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
            <!-- <el-button type="warning" icon="el-icon-download" size="small" @click="handleExport" >导出 </el-button> -->
        </el-form-item>
    </el-form>

    <!--v-hasPermi="['hr:invoice:apply:add']"-->
    <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
            <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd()"
            
            >新增退票
            </el-button>
        </el-col>
    </el-row>



    <el-table
        class="list-table"
        v-loading="listLoading"
        :data="listData"
        stripe
        size="small"
        fit
        highlight-current-row
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;">


        <el-table-column :show-overflow-tooltip="true" prop="projectNo" width="120">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">项目编号</p>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="projectName" >
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">项目名称</p>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="applyDeptName" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">申请部门</p>
          </template>
        </el-table-column>
        

      <el-table-column :show-overflow-tooltip="true" prop="expenseMonth" width="160">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">费用所属月</p>
          </template>
        </el-table-column>


       

         <el-table-column :show-overflow-tooltip="true" prop="cnt"  align="center" width="110">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">退票张数</p>
          </template>
        </el-table-column> 

         <el-table-column :show-overflow-tooltip="true" prop="sumMoney"  align="center" width="110">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">退票金额</p>
          </template>
        </el-table-column> 
       
        <el-table-column align="center" prop="status"  width="110">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">状态</p>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | todoSalaryStateFilter" size="small">{{scope.row.status |
              todoSalaryStateFilter('text')}}
            </el-tag>
          </template>
        </el-table-column>
        
        <!-- <el-table-column :show-overflow-tooltip="true" prop="createName">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">申请人</p>
          </template>
        </el-table-column>

        <el-table-column :show-overflow-tooltip="true" prop="createTime">
          <template slot="header" slot-scope="{}">
            <p style="margin: 0;">申请日期</p>
          </template>
          <template slot-scope="scope">
            <div>{{scope.row.createTime | formatDate('yyyy-MM-dd')}}</div>
          </template>
        </el-table-column> -->

        <el-table-column ref="actionColumn" align="left" label="操作" width="160px">
          <template slot-scope="scope">
            <el-button ref="actionEdit"
                       type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       @click="handleUpdate(scope.row)"
                       v-if="scope.row.status === '0'"
                       ></el-button>

            <el-button ref="actionDelete"
                       type="danger"
                       size="mini"
                       icon="el-icon-delete"
                       @click="handleDelete(scope.row)"
                       v-if="scope.row.status === '0'"
                      ></el-button>

            <el-button ref="actionView"
                       type="success"
                       size="mini"
                       icon="el-icon-view"
                       @click="handleView(scope.row)"
                       v-else
                       ></el-button>
            <el-tooltip class="item" effect="dark" content="撤回审批" placement="top"
                        v-if="scope.row.status == '10'"
                        >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-back"
                @click="handleBack(scope.row)"></el-button>
            </el-tooltip>
            <slot name="rights" :row-data="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          background
          :current-page="searchKey.pageNum"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="searchKey.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>


      <!-- 选择退票 -->
      <el-dialog title="请选择要退票的记录" :visible.sync="visible1" width="80%">
          <piaolist :from="'tuipiao'" @on-select="selectPiao"></piaolist>

      </el-dialog>

      <el-dialog title="请选择发票" :visible.sync="visible2" width="70%">
          <el-table
             @selection-change="handleSelectionChange"
            class="list-table"
            v-loading="listLoading2"
            :data="listData2"
            stripe
            size="small"
            fit
            highlight-current-row
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            style="width: 100%;">

            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="receiveCompanyName" width="160">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">收票单位全称</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="taxpayerIdentificationNumber" width="160">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">纳税人识别号</p>
              </template>
            </el-table-column>

             <el-table-column :show-overflow-tooltip="true" prop="addressAndPhone" width="120">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">地址与电话</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="openingBankAndNo" width="120">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">开户行及账号</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="invoiceTypeFullName" width="220">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">开票类型</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="includeTaxMoney" width="180">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">开票金额(含税)</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="otherMoney" width="100">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">其中其他金额</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="taxMoney" width="80">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">税额</p>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="remark">
              <template slot="header" slot-scope="{}">
                <p style="margin: 0;">备注</p>
              </template>
            </el-table-column>
          </el-table>

          <div slot="footer" class="dialog-footer">
            <el-button @click="visible2 = false">取消</el-button>
            <el-button type="primary" @click="handleSelectPiao">确定</el-button>
          </div>
        </el-dialog>




    </div>
</template>

<script>
    import TreeSelect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import treeAllListData from '@/mixins/treeAllListData'
    import commonMixins from '@/mixins/common'
    import filters from '@/filters/filters'
    import tagFilter from '@/filters/tagFilter'
    import  piaolist  from '@/views/todo/piaolist/index.vue'
    import { getPiaoListUpdateAPI } from "@/api/todo/piaomake";
    import request from '@/utils/request'
    export default {

        mixins: [commonMixins, treeAllListData,filters, tagFilter],
        components: {TreeSelect,piaolist},


        data(){
            return {
                searchKey:{},
                listLoading:false,
                listData:[],
                visible1:false,
                visible2:false,
                listLoading2:false,
                listData2:[],//发票
                ids:[],
                single:false,
                multiple:true,
                rows:[],
                piaodata:{},
                totalCount:0
            }
        },



        methods:{

          // 多选框选中数据
          handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length!=1
            this.multiple = !selection.length
            this.rows = selection
          },

          handleSizeChange(val) { // 分页改变每页条数
            this.searchKey.pageSize = val
            this.handleFilter()
          },
          handleCurrentChange(val) { // 分页切换分页
            this.searchKey.pageNum = val
            this.handleFilter()
          },

          handleDelete(data = null){
            let that = this;
            this.$confirm('是否确认删除?', '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function() {
              request({
                  url: '/hr/invoice/refund/apply/delete/'+data.id,
                  method: 'delete',
              }).then(response => {
                  if (response.code != '200') {
                      that.msgError('删除失败，原因是' + response.data.msg)
                      return
                  }
                  that.msgSuccess('删除成功！');
                  that.handleFilter()
              })

            })
            

          },

            //编辑退票
            handleUpdate(row){
              this.$router.push({
                name: 'Tuipiaomake',
                query:{
                    type: '2',
                    tuiPiao:true,
                    id:row.id,
                 
                }
              });
            },

            actionDelete(){

            },

            handleView(row){
              this.$router.push({
                name: 'Tuipiaomake',
                query:{
                    type: '3',
                    tuiPiao:true,
                    id:row.id,
                 
                }
              });
            },

            handleBack(row){

                var auditOpinion = prompt("请输入撤回原因:");
                if(!auditOpinion){
                  this.msgError('撤回原因不能为空！');
                }

                let that = this;
                request({
                    url: '/hr/invoice/refund/apply/taskBack',
                    method: 'post',
                    data: {
                        auditOpinion: auditOpinion,
                        businessId: row.id
                    }
                }).then(response => {
                    if (response.code != '200') {
                        that.msgError('撤回失败，原因是' + response.data.msg)
                        return
                    }
                      that.msgSuccess('撤回成功！');
                      that.handleFilter()
                })


            },

            handleFilter(){
                //console.log(111)
                let searchKey = {...this.searchKey}
                //单独处理createTime
                if( searchKey.createTime )this.processDateRange('createTime',searchKey)
                console.log(searchKey)
                request({
                    url: '/hr/invoice/refund/apply/list',
                    method: 'get',
                    params  : searchKey
                }).then(response => {
                    this.listData = response.rows
                    this.totalCount = response.total
                })



            },

            handleReset(){
              this.searchKey = {}
              this.handleFilter()
            },

            handleExport(){

            },

            handleAdd(){
              this.visible1 = true;
            },

            //选择发票
            selectPiao(data){
              console.log(data)
              this.visible2 = true;
              this.piaodata.id = data.id
              let that = this;
              request({
                  url: '/hr/invoice/refund/summary/refundList/'+data.id,
                  method: 'get'
                  
              }).then(response => {
                  that.listData2 = response.rows
              })

              
              // getPiaoListUpdateAPI({id:data.id}).then((res)=>{
              //   this.listData2 = res.data.hrInvoiceDetails
              //   console.log( this.listData2)
              // });

              


            },

            handleSelectPiao(){
              
              console.log(this.piaodata,this.ids)
              
              this.$router.push({
                name: 'Tuipiaomake',
                query:{
                    type: '3',...this.piaodata,
                  rows:JSON.stringify(this.ids)
                }
              });
            },


            async getDepartmentAllListData() { // 获取所有数据
                try {
                await this.$store.dispatch('department/GetDepartmentList', {
                    request: true,
                    showChargedOnly: true
                })
                } catch (error) {
                // console.log(error)
                this.$notify.error({
                    title: '错误',
                    message: error.message
                })
                }
            },
        },


        created(){
            this.getDepartmentAllListData();
            this.handleFilter()
        }
        
    }
</script>

<style lang="scss" scoped>

</style>